<template>
    <view class="container paddingBottomBar">
        <header-bar :config="config"></header-bar>
        <view class="top_bg"></view>
        <view class="order-main">
            <view class="consumer-top">
                <view>
                    <view class="flex-v-c"
                        ><image mode="aspectFill" src="@/static/icon/icon_out.png" class=""></image>调出仓</view
                    >
                    <view :class="{ color3: !warehouseOut }"
                        >{{ warehouseOut ? warehouseOut : "请选择仓库"
                        }}<uni-icons type="arrowright" size="24" customIcons="icon-black"></uni-icons
                    ></view>
                </view>
                <view class="center"
                    ><image mode="aspectFill" src="@/static/icon/icon_out.png" class=""></image>调拨到</view
                >
                <view class="sel-warehouse" @click="openWarehouse">
                    <view class="flex-v-c"
                        ><image mode="aspectFill" src="@/static/icon/icon_in.png" class=""></image>调入仓</view
                    >
                    <view :class="{ color3: !warehouse }"
                        >{{ warehouse ? warehouse : "请选择仓库"
                        }}<uni-icons type="arrowright" size="24" customIcons="icon-black"></uni-icons
                    ></view>
                </view>
            </view>
            <view class="product-sel">
                <text class="title-text">选择商品</text>
                <view class="menu">
                    <view class="menuli">
                        <iconsfont customIcons="icon-dingdanhao" :color="mainColor" size="28"></iconsfont>
                        <text>扫码添加</text>
                    </view>
                    <view class="menuli">
                        <iconsfont customIcons="icon-yituihuo" :color="mainColor" size="28"></iconsfont>
                        <text>添加商品</text>
                    </view>
                </view>
            </view>
            <view class="pro-list">
                <image src="@/static/logo.png" mode="aspectFill"></image>
                <view class="pro-right">
                    <view class="title text-show-line-1"
                        >A级-冰糖梨（中）1个约350g级-冰糖梨（中）1个约350g级-冰糖梨（中）1个约350g级-冰糖梨（中）1个约350g级-冰糖梨（中）1个约350g级-冰糖梨（中）1个约350g</view
                    >
                    <view class="spec">1个/约350g</view>
                    <view class="price"><text>¥3.22</text>x10个</view>
                </view>
            </view>
            <view class="pro-list">
                <image src="@/static/logo.png" mode="aspectFill"></image>
                <view class="pro-right">
                    <view class="title text-show-line-1"
                        >A级-冰糖梨（中）1个约350g级-冰糖梨（中）1个约350g级-冰糖梨（中）1个约350g级-冰糖梨（中）1个约350g级-冰糖梨（中）1个约350g级-冰糖梨（中）1个约350g</view
                    >
                    <view class="spec">1个/约350g</view>
                    <view class="price"><text>¥3.22</text>x10个</view>
                </view>
            </view>
            <view class="pro-list">
                <image src="@/static/logo.png" mode="aspectFill"></image>
                <view class="pro-right">
                    <view class="title text-show-line-1"
                        >A级-冰糖梨（中）1个约350g级-冰糖梨（中）1个约350g级-冰糖梨（中）1个约350g级-冰糖梨（中）1个约350g级-冰糖梨（中）1个约350g级-冰糖梨（中）1个约350g</view
                    >
                    <view class="spec">1个/约350g</view>
                    <view class="price"><text>¥3.22</text>x10个</view>
                </view>
            </view>
        </view>

        <view class="bottom-bar">
            <button class="btn btn-main" @click="submit">提交</button>
        </view>
        <uni-popup ref="popPostType" type="bottom" background-color="#fff" :safe-area="false">
            <view class="custom-actions-pop">
                <view class="custom-actions">
                    <button
                        v-for="(item, index) in postTypes"
                        :key="index"
                        class="btn btn-gray"
                        :class="usePost == item ? 'selected-text' : ''"
                        @click="selectFn(item)">
                        {{ getPostText(item) }}
                    </button>
                </view>
                <view class="cancel">
                    <button class="btn btn-gray" @click="cancelFn()">取消</button>
                </view>
            </view>
        </uni-popup>
        <uni-popup type="bottom" ref="warehousepopup" background-color="#fff" :safe-area="false">
            <view class="pop-pay-way">
                <view class="title"><text>请选择发货仓库</text></view>
                <scroll-view scroll-y="true" class="pay-way-scroll">
                    <view class="pay-way">
                        <view
                            class="pay-way-item"
                            v-for="(item, index) in WorkerList"
                            @click="selectWarehouse(item, index)">
                            <text>{{ item.RealName }}</text>
                        </view>
                    </view>
                </scroll-view>
                <button class="btn" @click="cancel">取消</button>
            </view>
        </uni-popup>
    </view>
</template>

<script>
import { GetProductDataBySubmit, StatisPostageMoneyByCar, SubmitFromCar } from "@/service/api/order.js"

import { GetCarList, GetUserAddressList } from "@/service/api/user.js"
import { GetDisPersonnel } from "@/service/api/store.js"
import { GetPostTypes } from "@/service/api/company.js"

import easyProImage from "@/components/easy/easy-pro-image.vue"
import orderSubmitList from "@/components/order/order-submit-list.vue"
export default {
    components: {
        easyProImage,
        orderSubmitList,
    },
    data() {
        return {
            config: {
                title: "调拨库存",
                centerSlot: true,
                rightSlot: false,
                color: ["#ffffff"],
            },
            mainColor: "",
            warehouseOut: "",
            warehouse: "",
            warehouseId: "",

            WorkerList: [],
            workerName: "",
            workerId: "",

            usePost: 0,
            postTypes: [],
            systemInfo: {},
        }
    },
    created() {
        let mainColor = this.easyGetColor("main")
        this.mainColor = mainColor
        this.config.backgroundColor = [1, mainColor]
    },
    onLoad(e) {},
    mounted() {
        this.getPostTypes()
        this.systemInfo = uni.getSystemInfoSync()
        this.getDisPersonnel()
    },
    onShow() {},
    methods: {
        getDisPersonnel() {
            GetDisPersonnel({ joinPosition: 5 }).then((res) => {
                if (res.State == 1) {
                    // let userInfo = storage.getCache("userInfo")
                    // let data = res.Data.find(e=>{return e.Tel== userInfo.Tel})
                    this.WorkerList = res.Data
                }
            })
        },
        openWarehouse() {
            this.$refs.warehousepopup.open()
        },
        selectWorker(item, index) {
            this.workerName = item.RealName
            this.workerId = item.ID
            this.$forceUpdate()
            this.$refs.workerpopup.close()
        },
        selectWarehouse(item, index) {
            this.warehouse = item.RealName
            this.warehouseId = item.ID
            this.$forceUpdate()
            this.$refs.warehousepopup.close()
        },

        getPostTypes() {
            GetPostTypes().then((res) => {
                this.postTypes = res.Data.PostType
                let defaultPost = this.postTypes.find((e) => {
                    return e == 0
                })
                if (!defaultPost) {
                    this.postTypes.unshift(0)
                }
                this.usePost = res.Data.PostDefault
            })
        },

        selectFn(value) {
            this.usePost = value
            this.cancelFn()
        },
        cancelFn() {
            this.$refs.popPostType.close()
        },
    },
}
</script>

<style lang="scss">
.icon-black {
    color: $color-gray-1 !important;
}
.menu {
    display: flex;
    justify-content: flex-end;
    .menuli {
        width: 160rpx;
        height: 50rpx;
        background: rgba(219, 0, 50, 0.07);
        border-radius: 25rpx;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-left: 12rpx;
        text {
            font-size: 24rpx;
            color: $app-color-main;
            padding-left: 8rpx;
        }
    }
}
.consumer-top {
    background: #ffffff;
    border-radius: 16rpx;
    display: flex;
    flex-direction: column;
    padding: 20rpx;
    margin-bottom: 16rpx;
    & > view {
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 92rpx;
        font-size: 28rpx;
        color: $color-gray-1;
    }
    .sel-warehouse {
        border-radius: 8rpx;
    }
    .flex-v-c {
        font-weight: bold;
    }
    image {
        width: 48rpx;
        height: 48rpx;
        margin-right: 12rpx;
    }
    .center {
        height: auto;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        font-size: 20rpx;
        color: $color-gray-3;
        image {
            width: 32rpx;
            height: 32rpx;
            margin-right: 20rpx;
            margin-left: 8rpx;
        }
    }
}
.product-sel {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 88rpx;
    .title-text {
        font-size: 28rpx;
        font-weight: bold;
        color: $color-gray-1;
    }
}

.bottom-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 120rpx;
    padding: 0 30rpx;
    background: #ffffff;
    box-shadow: 0px -2rpx 10rpx 0px rgba(0, 0, 0, 0.1);
    .btn {
        width: 690rpx;
        height: 80rpx;
        color: $app-color-main;
        border-radius: 45rpx;
        font-size: 32rpx;
        color: #ffffff;
    }
}
.cell-icon {
    margin-top: 4rpx;
}
.msg-input {
    display: flex;
    display: flex;
    height: 150rpx;
    background: #f7f7f7;
    border-radius: $border-radius-10;
    padding: 10rpx;
    width: calc(100% - 20rpx);
}
.remark-item {
}
.top_bg {
    height: 128rpx;
    background: $app-color-main;
    border-radius: 0px 0px 40rpx 40rpx;
}
.order-item {
    background: $color-white;
    margin-bottom: 24rpx;
    // background: red;
}

.product-item {
    padding: 32rpx $app-page-padding;
    border-radius: 16rpx;

    .title-text {
        display: flex;
        font-weight: 700;
        // border-bottom: 1rpx solid #EBEBEB;
        margin-bottom: 24rpx;
        font-size: 28rpx;
    }

    .title-text-flex {
        justify-content: space-between;
        align-items: center;
    }

    .title-text-right {
        font-weight: normal;
    }

    .title-text-desc {
        font-size: $font-size-28;
        color: $color-gray-1;
        padding-right: 12rpx;
        font-weight: normal;
    }
    .title-text-price {
        font-weight: bold;
        color: $app-color-main;
    }
}

.product-item-line {
    .title-text {
        border-bottom: none;
        margin-bottom: 0rpx;
    }
}
.mark {
    border-left: 16rpx solid transparent;
    border-right: 16rpx solid transparent;
    border-bottom: 16rpx solid #f7f7f7;
    width: 0;
    height: 0;
    margin-left: 50rpx;
    margin-top: 10rpx;
    margin-bottom: -2rpx;
}
.order-item-main {
    display: flex;
    flex: 1;
    // margin-top: 20rpx;
    flex-direction: row;
    padding: $app-page-padding;
    background: #f7f7f7;
    border-radius: 16rpx;
}

.order-main {
    margin-top: -128rpx;
    padding: 0 $app-page-padding $app-page-padding;

    .order-title {
        height: 98rpx;
        padding: $app-page-padding 0;
        display: flex;
        justify-content: space-between;
        align-items: center;

        text {
            font-weight: 700;
            font-size: $font-size-36;
            color: $color-white;
        }

        view {
            font-size: $font-size-24;
            color: $color-white;
        }
    }
}
.ptb0 {
    padding-bottom: 0 !important;
}
.total-price {
    color: $app-color-main;
}

.product-num {
    color: $color-gray-1;
    font-size: 28rpx;
}

.color3 {
    color: $color-gray-3 !important;
}
.pay-way-scroll {
    max-height: 50vh;
}
.pay-way-item {
    justify-content: center;
    border-color: #f2f2f2 !important;
    text {
        font-size: 28rpx;
    }
}
.pro-list {
    background: #ffffff;
    border-radius: 12rpx;
    margin-bottom: 12rpx;
    padding: 24rpx;
    display: flex;
    image {
        width: 160rpx;
        height: 160rpx;
        border-radius: 8rpx;
        margin-right: 16rpx;
    }
    .pro-right {
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        .title {
            font-size: 28rpx;
            font-weight: bold;
            color: $color-gray-1;
        }
        .spec {
            font-size: 28rpx;
            color: $color-gray-3;
        }
        .price {
            font-size: 28rpx;
            color: $color-gray-1;
            text {
                padding-right: 14rpx;
                color: #252528;
                font-size: 32rpx;
                font-weight: bold;
            }
        }
    }
}
</style>
